<template>
    <div class="statistical-tow">
        <div class="tow-box">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="门店" name="1"
                    ><statisticalList
                        ref="statisticalList1"
                        :selectForm="selectForm1"
                        :dataList="dataList1"
                        :optionList="optionList"
                        :activeName="activeName"
                        @cheSelectFun="cheSelectFun"
                        @resetDate="resetDate"
                        @loadFun="loadFun"
                        @selectDate="selectDate"
                        @closeDate="closeDate"
                        @getDetailsInfo="getDetailsInfo"
                    ></statisticalList
                ></el-tab-pane>
                <el-tab-pane label="产品" name="2"
                    ><statisticalList
                        ref="statisticalList2"
                        :selectForm="selectForm2"
                        :dataList="dataList2"
                        :optionList="optionList"
                        :activeName="activeName"
                        @cheSelectFun="cheSelectFun"
                        @resetDate="resetDate"
                        @loadFun="loadFun"
                        @selectDate="selectDate"
                        @closeDate="closeDate"
                        @getDetailsInfo="getDetailsInfo"
                    ></statisticalList
                ></el-tab-pane>
                <el-tab-pane label="服务" name="3" v-if="aboutLimit"
                    ><statisticalList
                        ref="statisticalList3"
                        :selectForm="selectForm3"
                        :dataList="dataList3"
                        :optionList="optionList"
                        :activeName="activeName"
                        @cheSelectFun="cheSelectFun"
                        @resetDate="resetDate"
                        @loadFun="loadFun"
                        @selectDate="selectDate"
                        @closeDate="closeDate"
                        @getDetailsInfo="getDetailsInfo"
                    ></statisticalList
                ></el-tab-pane>
                <el-tab-pane label="预约" name="4" v-if="aboutLimit"
                    ><statisticalList
                        ref="statisticalList4"
                        :selectForm="selectForm4"
                        :dataList="dataList4"
                        :optionList="optionList"
                        :activeName="activeName"
                        @cheSelectFun="cheSelectFun"
                        @resetDate="resetDate"
                        @loadFun="loadFun"
                        @selectDate="selectDate"
                        @closeDate="closeDate"
                        @getDetailsInfo="getDetailsInfo"
                    ></statisticalList
                ></el-tab-pane>
                <el-tab-pane label="客户" name="5"
                    ><statisticalList
                        ref="statisticalList5"
                        :selectForm="selectForm5"
                        :dataList="dataList5"
                        :optionList="optionList"
                        :activeName="activeName"
                        @cheSelectFun="cheSelectFun"
                        @resetDate="resetDate"
                        @loadFun="loadFun"
                        @selectDate="selectDate"
                        @closeDate="closeDate"
                        @getDetailsInfo="getDetailsInfo"
                    ></statisticalList
                ></el-tab-pane>
                <el-tab-pane label="成员" name="6"
                    ><statisticalList
                        ref="statisticalList6"
                        :selectForm="selectForm6"
                        :dataList="dataList6"
                        :optionList="optionList"
                        :activeName="activeName"
                        @cheSelectFun="cheSelectFun"
                        @resetDate="resetDate"
                        @loadFun="loadFun"
                        @selectDate="selectDate"
                        @closeDate="closeDate"
                        @getDetailsInfo="getDetailsInfo"
                    ></statisticalList
                ></el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import statisticalList from "./statisticalList.vue";
import config from "@/js/conf/Config.js";
import accessCtrl from "@/js/limit/AccessCtrl.js";

export default {
    components: { statisticalList },
    data() {
        return {
            activeName: "1",
            aboutLimit: false,
            //门店筛选参数
            selectForm1: {
                time: "", //日期
                order: "1", //排序
                uid_cp: "", //成员
                stime: "",
                dtime: "",
                pfrom: 0,
                pnum: 20,
            },
            //产品筛选参数
            selectForm2: {
                time: "", //日期
                order: "1", //排序
                uid_cp: "", //成员
                shopid: "", //门店
                stime: "",
                dtime: "",
                pfrom: 0,
                pnum: 20,
            },
            //服务筛选参数
            selectForm3: {
                time: "", //日期
                order: "1", //排序
                uid_cp: "", //成员
                shopid: "", //门店
                stime: "",
                dtime: "",
                is_yy: "1",
                pfrom: 0,
                pnum: 20,
            },
            //预约筛选参数
            selectForm4: {
                time: "", //日期
                order: "", //排序
                uid_cp: "", //成员
                shopid: "", //门店
                stime: "",
                dtime: "",
                pfrom: 0,
                pnum: 20,
            },
            //客户筛选参数
            selectForm5: {
                time: "", //日期
                order: "1", //排序
                uid_cp: "", //成员
                shopid: "", //门店
                stime: "",
                dtime: "",
                pfrom: 0,
                pnum: 20,
            },
            //成员筛选参数
            selectForm6: {
                time: "", //日期
                order: "1", //排序
                shopid: "", //门店
                stime: "",
                dtime: "",
                pfrom: 0,
                pnum: 20,
            },
            // 限制滚动
            is_soll1: false,
            is_soll2: false,
            is_soll3: false,
            is_soll4: false,
            is_soll5: false,
            is_soll6: false,

            dataList1: [], //门店列表
            dataList2: [], //产品列表
            dataList3: [], //服务列表
            dataList4: [], //预约列表
            dataList5: [], //客户列表
            dataList6: [], //成员列表

            // 筛选下拉数据
            optionList: {
                mtime: [
                    {
                        title: "全部日期",
                        id: "",
                    },
                ],
                shop_ls: [
                    {
                        name: "全部云店",
                        id: "",
                    },
                ],
                staff_ls: [
                    {
                        name: "全部成员",
                        id: "",
                    },
                ],
                order_ls: [], //排序

                order_ls4: [
                    {
                        id: "",
                        title: "全部排序",
                    },
                ], //预约的排序
            },
        };
    },
    methods: {
        async initData(tab) {
			if(tab)
				this.activeName = tab
			this.handleClick();
            this.aboutLimit = await accessCtrl.getAboutLimit();
        },
        // 重置时间
        resetDate() {
            const val = this.activeName;
            this[`selectForm${val}`].time = "";
            this[`selectForm${val}`].stime = "";
            this[`selectForm${val}`].dtime = "";
        },
        closeDate() {
            const val = this.activeName;
            if (this[`selectForm${val}`].stime == "") {
                this[`selectForm${val}`].time = "";
            }
        },
        // 期间选择器
        selectDate(st, et) {
            this.emptyData();
            const val = this.activeName;
            this[`selectForm${val}`].stime = st;
            this[`selectForm${val}`].dtime = et;
            if (val == 1) {
                this.getStoresList();
            } else if (val == 2 || val == 3) {
                this.getGoodsList();
            } else if (val == 4) {
                this.getBookList();
            } else if (val == 5) {
                this.getCustomList();
            } else if (val == 6) {
                this.getStaffList();
            }
        },

        // 获取详情
        getDetailsInfo(item) {
            const data = {
                activeName: this.activeName,
                optionList: this.optionList,
                listItem: item,
            };
            this[`dataList${this.activeName}`].map((v) => {
                if (item.id == v.id) {
                    v.acitve = true;
                } else {
                    v.acitve = false;
                }
            });
            for (let i = 1; i < 7; i++) {
                if (i != this.activeName) {
                    this[`dataList${i}`].map((v) => {
                        if (v.acitve) {
                            v.acitve = false;
                        }
                    });
                }
            }
            this.$emit("getDetailsInfo", data);
        },
        // 切换tab
        handleClick() {
            const val = this.activeName;
            if (val == 1 && this.dataList1.length == 0) {
                this.getStoresList();
            } else if (
                (val == 2 && this.dataList2.length == 0) ||
                (val == 3 && this.dataList3.length == 0)
            ) {
                this.getGoodsList();
            } else if (val == 4 && this.dataList4.length == 0) {
                this.getBookList();
            } else if (val == 5 && this.dataList5.length == 0) {
                this.getCustomList();
            } else if (val == 6 && this.dataList6.length == 0) {
                this.getStaffList();
            }
        },
        // 筛选
        cheSelectFun() {
            const val = this.activeName;
            if (this[`selectForm${val}`].time != 5) {
                this[`selectForm${val}`].stime = "";
                this[`selectForm${val}`].dtime = "";
            }
            this.emptyData();
            if (val == 1) {
                this.getStoresList();
            } else if (val == 2 || val == 3) {
                this.getGoodsList();
            } else if (val == 4) {
                this.getBookList();
            } else if (val == 5) {
                this.getCustomList();
            } else if (val == 6) {
                this.getStaffList();
            }
        },
        // 滚动加载
        loadFun() {
            const val = this.activeName;
            if (this[`is_soll${val}`]) return;
            this[`selectForm${val}`].pfrom += 20;
            if (val == 1) {
                this.getStoresList();
            } else if (val == 2) {
                this.getGoodsList();
            } else if (val == 3) {
                this.getGoodsList();
            } else if (val == 4) {
                this.getBookList();
            } else if (val == 5) {
                this.getCustomList();
            } else if (val == 6) {
                this.getStaffList();
            }
        },
        // 获取门店列表
        async getStoresList() {
            this.is_soll1 = true;
            let url = config.REPORT_COUNT_SHOP;
            let param = this.selectForm1;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.mtime && this.optionList.mtime.length == 1) {
                    this.optionList.mtime = this.optionList.mtime.concat(
                        res.data.mtime
                    );
                }

                if (res.data.order_ls && this.optionList.order_ls.length == 0) {
                    res.data.order_ls.map((v) => {
                        v.title = `按${v.title}排序`;
                    });
                    this.optionList.order_ls = res.data.order_ls;
                }

                if (res.data.shop_ls && this.optionList.shop_ls.length == 1) {
                    this.optionList.shop_ls = this.optionList.shop_ls.concat(
                        res.data.shop_ls
                    );
                }

                if (res.data.staff_ls && this.optionList.staff_ls.length == 1) {
                    this.optionList.staff_ls = this.optionList.staff_ls.concat(
                        res.data.staff_ls
                    );
                }

                if (res.data.count_ls) {
                    res.data.count_ls = this.unifiedData(
                        res.data.count_ls,
                        "rel_name",
                        "rel_img",
                        "rel_id"
                    );
                    if (this.dataList1.length == 0) {
                        const data = {
                            activeName: this.activeName,
                            optionList: this.optionList,
                            listItem: res.data.count_ls[0],
                        };
                        res.data.count_ls[0].acitve = true;
                        this.$emit("setbufAcitve", data);
                    }
                    this.dataList1 = this.dataList1.concat(res.data.count_ls);
                    setTimeout(() => {
                        this.is_soll1 = false;
                    }, 200);
                } else {
                    this.is_soll1 = true;
                }
            }
        },
        // 获取产品列表
        async getGoodsList() {
            const val = this.activeName;
            this[`is_soll${val}`] = true;
            let url = config.REPORT_COUNT_GOODS;
            let param = val == 2 ? this.selectForm2 : this.selectForm3;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.goods_ls) {
                    res.data.goods_ls = this.unifiedData(
                        res.data.goods_ls,
                        "name",
                        "imgs",
                        "rel_id"
                    );

                    if (val == 2) {
                        this.dataList2 = this.dataList2.concat(
                            res.data.goods_ls
                        );
                    } else {
                        this.dataList3 = this.dataList3.concat(
                            res.data.goods_ls
                        );
                    }
                    setTimeout(() => {
                        this[`is_soll${val}`] = false;
                    }, 200);
                } else {
                    this[`is_soll${val}`] = false;
                }
            }
        },
        // 获取预约列表
        async getBookList() {
            this.is_soll4 = true;
            let url = config.REPORT_BOOK_CUSTOMER;
            let param = this.selectForm4;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (
                    res.data.order_ls &&
                    this.optionList.order_ls4.length == 1
                ) {
                    this.optionList.order_ls4 =
                        this.optionList.order_ls4.concat(res.data.order_ls);
                }

                if (res.data.ls) {
                    res.data.ls = this.unifiedData(
                        res.data.ls,
                        "name",
                        "img",
                        "customerid"
                    );

                    this.dataList4 = this.dataList4.concat(res.data.ls);
                    setTimeout(() => {
                        this.is_soll4 = false;
                    }, 200);
                } else {
                    this.is_soll4 = true;
                }
            }
        },
        // 获取客户列表
        async getCustomList() {
            this.is_soll5 = true;
            let url = config.REPORT_COUNT_CUSTOM;
            let param = this.selectForm5;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.count_ls) {
                    res.data.count_ls = this.unifiedData(
                        res.data.count_ls,
                        "rel_name",
                        "rel_img",
                        "rel_id"
                    );
                    this.dataList5 = this.dataList5.concat(res.data.count_ls);
                    setTimeout(() => {
                        this.is_soll5 = false;
                    }, 200);
                } else {
                    this.is_soll5 = true;
                }
            }
        },
        // 获取成员列表
        async getStaffList() {
            this.is_soll6 = true;
            let url = config.REPORT_COUNT_STAFF;
            let param = this.selectForm6;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.count_ls) {
                    res.data.count_ls = this.unifiedData(
                        res.data.count_ls,
                        "rel_name",
                        "rel_img",
                        "rel_id"
                    );
                    this.dataList6 = this.dataList6.concat(res.data.count_ls);
                    setTimeout(() => {
                        this.is_soll6 = false;
                    }, 200);
                } else {
                    this.is_soll6 = true;
                }
            }
        },
        // 统一数据字段名
        unifiedData(data, title_key, img_key, id_key) {
            data.map((v) => {
                v.acitve = false;
                v.title = v[title_key];
                v.img = v[img_key];
                v.id = v[id_key];
            });
            return data;
        },
        emptyData() {
            const val = this.activeName;
            if (val == 1) {
                this.is_soll1 = false;
                this.selectForm1.pfrom = 0;
                this.dataList1 = [];
            } else if (val == 2) {
                this.is_soll2 = false;
                this.selectForm2.pfrom = 0;
                this.dataList2 = [];
            } else if (val == 3) {
                this.is_soll3 = false;
                this.selectForm3.pfrom = 0;
                this.dataList3 = [];
            } else if (val == 4) {
                this.is_soll4 = false;
                this.selectForm4.pfrom = 0;
                this.dataList4 = [];
            } else if (val == 5) {
                this.is_soll5 = false;
                this.selectForm5.pfrom = 0;
                this.dataList5 = [];
            } else if (val == 6) {
                this.is_soll6 = false;
                this.selectForm6.pfrom = 0;
                this.dataList6 = [];
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.statistical-tow {
    margin-left: 0;
    width: 600px;
    border-right: 1px #ececec solid;
    .tow-box {
        padding: 10px;
    }
}
</style>